<p>Select multiple elements with a limit number of selections (e.g.: 3)</p>

@if (selectedPeople.length === 3 && select.focused) {
	<div class="alert alert-warning mb-2">
		<small>Max selection reached</small>
	</div>
}

<ng-select #select [items]="people$ | async" [multiple]="true" [maxSelectedItems]="3" bindLabel="name" [(ngModel)]="selectedPeople">
</ng-select>

<div class="mt-3">
	Selected value: <br />
	<ul>
		@for (item of selectedPeople; track item) {
			<li>{{ item.name }}</li>
		}
	</ul>
	<button (click)="clearModel()" class="btn btn-secondary btn-sm">Clear model</button>
</div>
